<template>
	<view class="certification-page">
		<image class="logo" src="../../../static/image/logo.png" mode=""></image>
		<span class="title">{{type == 1 ? '个人':'企业'}}认证</span>
		<ul>
			<li v-for="(item, index) in handleForms" :key="index">
				<span>{{item.title}}</span>
				<div class="input" v-if="item.model.indexOf('img') == -1">
					<image :src="item.icon" mode=""></image>
					<input v-model="item.value" type="text" :placeholder="`这里输入您的${item.title}`">
					<button v-if="item.model == 'mobile'" @click="getCode">{{codeText}}</button>
				</div>
				<div class="upload" v-else @click="uploadImage(index)">
					<image v-if="item.value" :src="item.value" mode=""></image>
					<span v-else>请上传营业执照</span>
				</div>
			</li>
		</ul>
		<SSButton title="认证" @click="onSubmit" />

	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import globalConfig from '@/config/index.js'
	import {
		validPhone
	} from '@/utils/index.js'
	export default {
		components: {
			SSButton
		},
		data() {
			return {
				type: 1,

				codeText: '获取验证码',

				forms: [
					[
						// 用户
						{
							title: '姓名',
							model: 'name',
							icon: require('../../../static/image/iocn-yonghuming@2x.png'),
							value: ''
						},
						{
							title: '手机号',
							model: 'mobile',
							icon: require('../../../static/image/icon-shoujihao@2x.png'),
							value: '',
						}, {
							title: '验证码',
							model: 'code',

							icon: require('../../../static/image/icon-mima@2x.png'),
							value: ''
						}, {
							title: '身份证号',
							model: 'id_card',
							value: '',
							icon: require('../../../static/image/icon-mima@2x.png'),
						},
					],
					[
						// 企业
						{
							title: '企业名称',
							model: 'company',
							icon: require('../../../static/image/iocn-yonghuming@2x.png'),
							value: ''
						},
						{
							title: '手机号',
							model: 'mobile',
							icon: require('../../../static/image/icon-shoujihao@2x.png'),
							value: ''
						}, {
							title: '验证码',
							model: 'code',
							icon: require('../../../static/image/icon-mima@2x.png'),
							value: ''
						},
						{
							title: '上传营业执照',
							model: 'license_img',
							icon: require('../../../static/image/icon-mima@2x.png'),
							value: ''
						},
						{
							title: '统一社会信用代',
							model: 'license',
							icon: require('../../../static/image/icon-mima@2x.png'),
							value: ''
						},
					]
				],
				timer: null
			};
		},
		onLoad({
			type
		}) {
			this.type = type
		},
		computed: {
			handleForms() {
				return this.forms[this.type - 1]
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			uploadImage(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: async res => {
						const {
							data
						} = await await this.$http.User.uploadAvatar(res.tempFilePaths[0])

						console.log(globalConfig.BASE_URL, data)
						this.forms[this.type - 1][index].value = globalConfig.BASE_URL + data.url
						console.log(this.forms[this.type - 1])
					}
				});
			},
			// 获取验证码
			async getCode() {
				let mobile = this.forms[this.type - 1].find(x => x.model == 'mobile')

				if (!validPhone(mobile.value)) return uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				})
				if (this.codeText.length >= 4) {
					// 开启倒计时
					let codeTime = 60
					this.timer = setInterval(() => {
						if (codeTime <= 0) {
							this.codeText = '重新获取'
							clearInterval(timer)
							return false
						}
						codeTime -= 1
						this.codeText = `${codeTime}s`
						console.log(this.codeText)
					}, 1000)


					let apis = [this.$http.User.userAuthSms, this.$http.Company.companyAuthSms]

					const {
						code,
						msg
					} = await apis[this.type - 1](mobile.value)

					if (code != 200) return uni.showToast({
						title: msg,
						icon: 'none'
					})


				}

			},

			// 提交
			async onSubmit() {

				let isVerify = this.forms[this.type - 1].every(x => x.value)
				let data = {}
				this.forms[this.type - 1].map(x => {
					data[x.model] = x.value
				})
					
				if (!isVerify) return uni.showToast({
					title: '请填写完整表单',
					icon: 'none'
				})

				let apis = [this.$http.User.useridcard, this.$http.Company.companyauth]

				const {
					code,
					msg
				} = await apis[this.type - 1](data)
				uni.showToast({
					title: code == 200 ? '认证完成' : msg,
					icon: "none"
				})

				if (code != 200) return false

				let time = setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.certification-page {
		display: flex;
		flex-direction: column;
		padding-bottom: 84upx;

		.logo {
			width: 292upx;
			height: 164upx;
			margin: 0 auto;
			margin-top: 76upx;
		}

		.title {
			color: #28211F;
			font-size: 40upx;
			font-weight: 600;
			margin: 0 auto;
			margin-bottom: 120upx;

		}

		ul {
			padding-bottom: 252upx;

			li {
				margin-bottom: 32upx;
				margin: 0 48upx;
				padding-top: 38upx;

				span {
					color: #666E7A;
					font-size: 24upx;
					font-weight: 500;
					padding-bottom: 18upx;
				}

				&:nth-of-type(2) .input image {
					width: 33upx;
					height: 30upx;
				}

				&:nth-of-type(3) .input image,
				&:nth-of-type(4) .input image {
					width: 25upx;
					height: 31upx;
				}

				button {
					height: 56upx;
					line-height: 56upx;
					background: #2AABE2;
					color: #fff;
					font-size: 24upx;
					font-weight: 500;
					padding: 0 10upx;
				}

				.input {
					border: 1px solid #EEEEEE;
					padding-left: 40upx;
					margin-top: 18upx;
					display: flex;
					height: 96upx;
					align-items: center;
					border-radius: 8upx;

					image {
						width: 24upx;
						height: 31upx;
					}

					input {
						margin-left: 18upx;
						color: #333;
						font-size: 28upx;
						font-weight: 400;
					}
				}

				.upload {
					border: 1px dashed #ccc;
					padding: 30upx;
					margin-top: 30upx;
					border-radius: 15upx;
					span {
						text-align: center;
					}
				}
			}
		}
	}
</style>
